<template>
    <div class="c-progress">
        <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
            <div class="c-progress-inner" :style="setProgressStyle"></div>
            <div v-if="props.showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
        </div>
        <span style="margin-left: 20px;" v-if="props.showPerText">{{ props.violationTime }}</span>
    </div>
</template>
<script setup>
import { defineProps, ref, computed, onMounted, defineEmits, watchEffect } from 'vue'
import dayjs from 'dayjs';
// 使用了element的颜色
const colorTable = {
    success: '#13ce66',
    fail: '#ff4949',
    warning: '#e6a23c',
    default: '#409EFF'
}
const emit = defineEmits(['percentChange']);
const slider = ref(null);
const progress = ref(null);
let sliderLeft = ref(0);
let progressWidth = ref(0);//进度条长度
let tempPercent = ref(0);//百分比
const props = defineProps({
    percent: {
        type: Number,
        default: 60
    },
    showSlider: {
        type: Boolean,
        default: true
    },
    showPerText: {
        type: Boolean,
        default: true
    },
    // 进度条的宽度
    width: {
        type: Number,
        default: 300
    },
    bgColor: {
        type: String,
        default: '#ebeef5'
    },
    progressColor: {
        type: String,
        default: '#409EFF'
    },
    // 滑块的宽度
    sliderWidth: {
        type: Number,
        default: 20
    },
    // 颜色的类型
    type: {
        type: String,
        default: '#409EFF'
    },
    violationTime: {
        type: String,
        default: ''
    }
})
// //设置进度条的背景样式
const setProgressBgStyle = computed(() => {
    return {
        // 加上滑块的宽度
        width: `${props.width + props.sliderWidth}px`
    }
})
// 设置进度条的样式
const setProgressStyle = computed(() => {
    const color = colorTable[props.type] || props.progressColor
    return {
        width: `${progressWidth.value}px`,
        background: color
    }
})
// 设置进度条的样式
const setSliderStyle = computed(() => {
    const color = colorTable[props.type] || props.progressColor
    return {
        border: `1px solid ${color}`,
        width: `${props.sliderWidth}px`,
        height: `${props.sliderWidth}px`,
        left: `${sliderLeft.value}px`
    }
})
watchEffect(() => {
    sliderLeft.value = props.width / 100 * props.percent
    progressWidth.value = sliderLeft.value + props.sliderWidth // 滑块的x坐标加上滑块的宽度
    tempPercent.value = props.percent
})

onMounted(() => {
    sliderLeft.value = props.width / 100 * props.percent
    progressWidth.value = sliderLeft.value + props.sliderWidth // 滑块的x坐标加上滑块的宽度
    tempPercent.value = props.percent

    addListener()
})
const addListener = () => {
    const sliderRef = slider.value;
    const progressRef = progress.value;
    let isClickSlider = false
    let distance = 0 // 滑块与点击坐标的绝对距离
    progressRef.onclick = (e) => {
        // 阻止事件冒泡
        if (e.target == sliderRef) {
            return
        }
        let curX = progressRef.offsetLeft
        sliderLeft.value = e.offsetX - curX
        if (sliderLeft.value <= 0) {
            sliderLeft.value = 0
        }
        if (sliderLeft.value >= props.width) {
            sliderLeft.value = props.width
        }
        _countCurPercent()
        emit('percentChange', tempPercent.value)
    }
    sliderRef.onmousedown = (e) => {
        isClickSlider = true
        let curX = sliderRef.offsetLeft
        distance = e.pageX - curX // 得出绝对距离
        document.onmousemove = (e) => {
            if (isClickSlider) {
                // 判断是否已经超出进度条的长度
                if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (props.width - 0)) {
                    sliderLeft.value = e.pageX - distance
                    _countCurPercent()
                    emit('percentChange', tempPercent.value)
                }
            }
        }
        document.onmouseup = () => {
            isClickSlider = false
            emit('percentChange', tempPercent.value)
            document.onmousemove = document.onmouseup = null
        }
    }


}
// 算出百分比
const _countCurPercent = () => {
    tempPercent.value = Math.ceil(parseInt(sliderLeft.value / props.width * 100))
    progressWidth.value = sliderLeft.value + 20
    // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
    if (tempPercent.value <= 0) {
        progressWidth.value = 0
        sliderLeft.value = 0
    }
    if (tempPercent.value >= 100) {
        progressWidth.value = props.width + 20
        sliderLeft.value = props.width
    }
}
</script>
<style lang="less" scoped>
.c-progress {
    @width: 300px;
    @radius: 5px;
    display: flex;
    align-items: center;

    span {
        margin-left: 5px;
        font-size: 14px;
        color: #fff;
    }

    .c-progress-outer {
        width: @width;
        height: 10px;
        border-radius: @radius;
        background: #ebeef5;
        position: relative;
        display: flex;
        align-items: center;

        .c-progress-inner {
            width: 100px;
            height: 10px;
            background: #409EFF;
            border-radius: @radius;
        }

        .c-progress-slider {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 1px solid #409EFF;
            position: absolute;
            z-index: 10;
            left: 10px;
        }
    }
}
</style>